<template>
    <Transition name="fade" mode="out-in" appear>
        <section class="line-chart-dialog-bg" v-if="visible"></section>
    </Transition>
    <Transition name="scale" mode="out-in" appear>
        <section class="line-chart-dialog" v-if="visible">
            <section class="line-chart-box">
                <!-- 标题 -->
                <section class="line-title">
                    <span></span>
                    <p>{{ title }}</p>
                    <span></span>
                </section>
                <slot name="content"></slot>
                <!-- 关闭按钮 -->
                <section class="close" @click="onHide">
                    <span class="iconfont icon-shanchu"></span>
                </section>
            </section>
        </section>
    </Transition>
</template>
<script setup lang="ts">
import { watchEffect } from 'vue'
import { ref } from 'vue'

//接收父级传递的参数
const props = defineProps(['visible', 'title'])
//注册父级回调
const emits = defineEmits(['hide'])
//
const visible = ref(false)
const title = ref('')

watchEffect(() => {
    visible.value = props.visible
    title.value = props.title
})

const onHide = () => {
    emits('hide')
}
</script>

<style scoped lang="scss">
.line-chart-dialog-bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2001;
    background-color: rgba($color: #000000, $alpha: 0.5);
}
.line-chart-dialog {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2002;
    box-sizing: border-box;
    padding: var(--cxl-size-16);
    display: flex;
    align-items: center;
    justify-content: center;
    .line-chart-box {
        box-sizing: border-box;
        padding: var(--cxl-size-30) var(--cxl-size-16);
        position: relative;
        width: 100%;
        height: auto;
        background-color: var(--cxl-color-white);
        border-radius: var(--cxl-size-6);

        .line-title {
            font-weight: 600;
            font-size: var(--cxl-size-24);
            position: relative;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            p {
                margin: 0 var(--cxl-size-10);
            }
            span {
                content: '';
                display: block;
                width: calc(var(--cxl-size-30) + var(--cxl-size-20));
                height: 2px;
                background: #d8d8d8;
            }
        }

        .close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            > span {
                font-size: var(--cxl-size-24);
            }
        }
    }
}
</style>
